{{define "content"}}
<div class="page-title-box">
    <div class="row align-items-center">
        <div class="col-auto">
            <h2 class="page-title">监控信息</h2>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div id="job" class="card" method="post">
            <div class="card-body">
                <h3 class="card-title">CPU占比</h3>
                <div id="cpu"></div>
                <h3 class="card-title">内存占用</h3>
                <div id="memory"></div>
            </div>
            <div class="card-footer text-right">
                <a class="btn btn-primary" href="{{.BackUrl}}">返回</a>
            </div>
        </div>
    </div>
</div>
{{end}}
{{define "script"}}
<script type="text/javascript">
    $(document).ready(function () {
        (new ApexCharts(document.getElementById('cpu'), {
            chart: {
                type: "line",
                fontFamily: 'inherit',
                height: 240,
                parentHeightOffset: 0,
                toolbar: {
                    show: false,
                },
                animations: {
                    enabled: false
                },
            },
            fill: {
                opacity: 1,
            },
            stroke: {
                width: 1,
                lineCap: "round",
                curve: "smooth",
            },
            series: [{
                name: "CPU Percent",
                data: [
                {{- range .CPU}}
                    {{.}},
                {{- end}}
                ]
            }],
            xaxis: {
                type: 'datetime',
            },
            labels: [
                {{- range .Time}}
                    {{.}},
                {{- end}}
            ],
            colors: ["#206bc4"],
            legend: {
                show: false,
            },
        })).render()
    });
    $(document).ready(function () {
        (new ApexCharts(document.getElementById('memory'), {
            chart: {
                type: "line",
                fontFamily: 'inherit',
                height: 240,
                parentHeightOffset: 0,
                toolbar: {
                    show: false,
                },
                animations: {
                    enabled: false
                },
            },
            fill: {
                opacity: 1,
            },
            stroke: {
                width: 1,
                lineCap: "round",
                curve: "smooth",
            },
            series: [{
                name: "Memory Uage (MB)",
                data: [
                {{- range .Memory}}
                    {{.}},
                {{- end}}
                ]
            }],
            xaxis: {
                type: 'datetime',
            },
            labels: [
                {{- range .Time}}
                    {{.}},
                {{- end}}
            ],
            colors: ["#206bc4"],
            legend: {
                show: false,
            },
        })).render()
    });
</script>
{{end}}